<template>
<div class="box">
    <fou-dialog :title="''" v-model:dialogValue="productDia" :width="'75%'">
        <template #content="">
                    <el-form :model="form"  ref="ruleFormRef">
                        <el-row :gutter="24">
                            <el-col :span="5">
                            <el-form-item label="類別" prop="type">
                                    <el-select clearable v-model="form.type"  size="default" >
                                    <el-option v-for="item in category_options" :key="item.id" :label="item.name" :value="item.id" />
                                    </el-select>
                            </el-form-item>
                            </el-col>
                            <el-col :span="6" >
                                <el-form-item label="搜索內容" prop="name">
                                    <el-input @keyup.enter="searchClick" clearable v-model="form.name" placeholder="搜索(內容)" class="input">
                                    <template #append>
                                    <el-button icon="Search" @click="searchClick"></el-button>
                                    </template>
                                </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                <el-button color="#081F42" class="mt-[20px]" :disabled="delsable" @click="choice">多選</el-button>
                <ProTable
                :data="tableData"
                :page="page"
                :column="column"
                :rowControl="[]"
                :elProps="elProps"
                :disabled="[]"
                :controlWidth="controlWidth"
                @page-change="onPageChange"
                @selection-change="onSelectionChange"
                @pageRefresh="pageRefresh"
                
                >
                <!-- <template #default="{ row, propname }">
                    <div  v-if="propname === 'school' || propname === 'cate' ">
                          {{row[propname] && row[propname].name ? row[propname].name : row[propname]}}
                    </div>
                    <div v-if="propname === 'card_number'">
                         <el-tag v-if="row[propname]" type="success">已綁定</el-tag>
                        <el-tag  v-if="!row[propname]" type='warning'>未綁定</el-tag>
                    </div>
                </template> -->
                <template #search_operate>
                    <el-table-column  fixed="right" width="200px" label="操作">
                        <template #default="scope">
                            <el-button  color="#081F42"  @click="handleSelect(scope.$index, scope.row)" >選擇</el-button >
                        </template>
                    </el-table-column>
                </template>
                </ProTable>
        </template>
    </fou-dialog>
</div>
</template>

<script setup>
import { ref ,reactive} from 'vue' 
import {product,producttype} from '@/http/index.js'
import {elProps,controlWidth} from './product'
import { loading ,closeLoading} from '@/common/function.js'

const emit = defineEmits(['update'])
const handleSelect=(index,row)=>{
    let value = [row]
    emit('update',value)
    productDia.value = false
}
const choice = ()=>{
     emit('update',check_group.value)
     productDia.value = false
}
const searchClick = async()=>{
    Object.assign(obj,form)
     TableData()
}
const page = reactive({current_page: 1,per_page: 10,total: 10,page_size: [10, 20, 30]})
const search = ref('')
const getSearch = async()=>{
    obj.name = search.value
     TableData()
}
const delsable = ref(true);
const check_group = ref([])
const onSelectionChange = (e) => {
  check_group.value = e
  delsable.value = e.length === 0;
};
const onPageChange = async({ e, type }) => {
  console.log(e, type);
  if (type == "current") {
    obj.page = e;
  }
  if (type == "size") {
    obj.page = 1
    obj.limit = e;
  }
     TableData()
};
const pageRefresh = async () => {
  obj.page = 1
   TableData();
};

const obj = reactive({
  school_id:localStorage.getItem('school_id'),
  page: page.current_page,
  limit: page.per_page,
  name: '',
  status:1,
});
const productDia = ref(false)
const tableData = ref([])
const TableData = async(e)=>{
    loading()
    const data = await  product(obj)
    console.log(data);
    if (data.code == 200) {
        tableData.value = data.data.data
    }
    closeLoading()
}
const category_options = ref([])
const TableDatatype = async(e)=>{
    let form = {limit:100}
    const data = await  producttype(form)
    if (data.code == 200) {
        category_options.value = data.data.data
    }
    closeLoading()
}
const column = {
    number:'編號',
    name:'名稱',
    price:'價格',
}
const form = reactive({
    type:'',
    name:''
})
defineExpose({
productDia,TableData,TableDatatype,
})
</script>

<style lang='less'  scoped>
.box{
  :deep(.el-dialog__body){
  padding:0 20px!important;
  }
  :deep(.el-dialog__footer){
    padding: 0 !important;

  }
  :deep(.tableflex[data-v-0985d712]){
    margin-top: 15px;
  }
}
</style>